<template>
	<view id="my-score">
		<view class="item uni-flex uni-padding-wrap" v-for="item in list" :key="item.id" @click="gotoTarget" :data-type="item.type" :data-id="item.id">
			<view class="left-icon">
				<icon :class="item.icon" />
			</view>
			<view class="uni-flex middle-content">
				<view class="type-wrap">
					<view class="type">{{ item.type_text }}</view>
					<view v-if="item.remarks" class="text-one-line">{{ item.remarks }}</view>
				</view>
				<view class="action-title word-break" v-if="item.action_title">
					{{ item.action_title}}
				</view>
				<view class="target-wrap word-break" v-if="item.target_title">
					<text class="target-username" v-if="item.target_username">@{{item.target_username}}：</text>
					{{ item.target_title}}
				</view>
				<view>
					<text class="text-muted">{{ item.created_at }}</text>
				</view>
			</view>
			<view class="right-score">
				<text class="score">{{ item.score }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import ListOptions from '../../minxins/list-options.js'
	export default {
		data() {
			return {
				page: 'my-score'
			}
		},
		mixins: [ListOptions],
		components: {
			
		},
		async onLoad(options) {
			this.options = Object.assign({}, this.options, options)
			try {
				let result = await this.fetchPageData()
				this.renderPage(result)
			} catch (error) {
				
			}
		},
		methods: {
			async fetchPageData() {
				let result = await this.$api.listMyScore(this.options);
				return result;
			},
			gotoTarget(e) {
				let dataset = e.currentTarget.dataset
				console.log(dataset)
				if (dataset.type == 'App\\Notifications\\TopicReplied') {
					//帖子被回复，直接跳转回复详情查看回复内容
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_comment_key=" + dataset.action_key + "&include_root_comment=1&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\CommentReplied') {
					//留言被回复，同样跳转回复详情查看，如果留言内容有根评论，把留言内容放其第一位
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_comment_key=" + dataset.root_comment_key + "&include_root_comment=1&append_key=" + dataset.action_key + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\TopicLiked') {
					//帖子被点赞，直接查看帖子
					uni.navigateTo({
					   url: "/pages/topic-comment/topic-comment?topic_key=" + dataset.target_key + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				} else if (dataset.type == 'App\\Notifications\\CommentLiked') {
					//回复被点赞，查看回复详情，如果回复有根评论，把回复放其第一位
					uni.navigateTo({
					   url: "/pages/comment-detail/comment-detail?root_comment_key=" + dataset.root_comment_key + "&include_root_comment=1&append_key=" + dataset.target_key + "&notification_id=" + dataset.id + "&read_at=" + dataset.read_at
					})
				}
			}
		}
		
	}
</script>

<style lang="scss">
#my-score {
	.item {
		padding-top: 20upx;
		padding-bottom: 20upx;
		&:not(:last-child) {
			// border-bottom: 10upx solid #eee;
			// margin-bottom: 20upx;
		}
		.left-icon {
			width: 80upx;
			flex-shrink: 0;
			display: none;
			align-items: center;
			.iconfont {
				font-size: 40upx;
				color: #777;
			}
		}
		.middle-content {
			flex-direction: column;
			flex-grow: 1;
			.type-wrap {
				display: flex;
				flex-direction: row;
				.type {
					margin-right: 20upx;
					font-weight: bold;
				}
			}
			.target-wrap {
				font-size: 80%;
				background-color: #eee;
				padding: 20upx;
				margin-top: 20upx;
				.target-username {
					font-weight: bold;
				}
			}
		}
		.right-score {
			display: flex;
			.score {
				font-size: 40upx;
			}
		}
	}
	
}
</style>
